<template>
  <el-dialog :visible.sync="visible" width="80%" @close="close" :append-to-body="true">
    <div class="largeScreen fcbc fv">
      <div class="titleBox flt pt20 pb20 w1">
        <div class="flex-1 tableTitle f20 pl20">风机运行状态列表</div>
      </div>
      <div class="tableBox p30 flex-1 w1 fcbc fv">
        <el-table v-loading="loading" :data="tableList" style="width: 100%" class="flex-1">
          <el-table-column type="index" width="50" label="序号" align="center"> </el-table-column>
          <el-table-column prop="ranking" label="风机编号" align="center"></el-table-column>
          <el-table-column prop="name" label="电场名称" align="center"> </el-table-column>
          <el-table-column prop="status" label="运行状态" align="center">
            <template slot-scope="scope">
              <dict-tag :options="options" :value="scope.row.status" />
            </template>
          </el-table-column>
          <el-table-column prop="time" label="跟新时间" align="center"> </el-table-column>
        </el-table>
        <div class="w1">
          <pagination layout="prev, pager, next" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import mapBox from "./map.vue";
import barChart from "./chart/barChart.vue";
import lineChart from "./chart/lineChart.vue";
import lineChartRight from "./chart/lineChart-right.vue";
export default {
  name: "tableList",
  components: { mapBox, barChart, lineChart, lineChartRight },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    visible: {
      get() {
        return this.dialogVisible;
      },
      set(val) {
        this.$emit("update:dialogVisible", val);
      },
    },
  },
  data() {
    return {
      options: [
        {
          dictValue: 1,
          dictLabel: "运行中",
        },
        {
          dictValue: 2,
          dictLabel: "已停止",
        },
      ],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      tableList: [
        {
          ranking: 1,
          name: "xxx电场",
          power: "xxxkWh",
          time: "xxx小时",
          status: 1,
        },
        {
          ranking: 2,
          name: "xxx电场",
          power: "xxxkWh",
          time: "xxx小时",
          status: 2,
        },
        {
          ranking: 3,
          name: "xxx电场",
          power: "xxxkWh",
          time: "xxx小时",
          status: 1,
        },
        {
          ranking: 4,
          name: "xxx电场",
          power: "xxxkWh",
          time: "xxx小时",
          status: 1,
        },
        {
          ranking: 5,
          name: "xxx电场",
          power: "xxxkWh",
          time: "xxx小时",
          status: 1,
        },
        {
          ranking: 6,
          name: "xxx电场",
          power: "xxxkWh",
          time: "xxx小时",
          status: 1,
        },
        {
          ranking: 7,
          name: "xxx电场",
          power: "xxxkWh",
          time: "xxx小时",
          status: 1,
        },
        {
          ranking: 8,
          name: "xxx电场",
          power: "xxxkWh",
          time: "xxx小时",
          status: 1,
        },
        {
          ranking: 9,
          name: "xxx电场",
          power: "xxxkWh",
          time: "xxx小时",
          status: 1,
        },
        {
          ranking: 10,
          name: "xxx电场",
          power: "xxxkWh",
          time: "xxx小时",
          status: 1,
        },
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    close() {
      this.$emit("update:dialogVisible", false);
    },
    /** 查询参数列表 */
    getList() {
      this.loading = true;
      setTimeout(() => {
        this.total = 80;
        this.loading = false;
      }, 1000);
    },
  },
};
</script>

<style scoped lang="scss">
.largeScreen {
  background-image: url("~@/assets/images/windPower/tableBg.png");
  background-size: 100% 100%;
  width: 100%;
  height: 500px;
  position: relative;
  .titleBox {
    height: 40px;
    width: 100%;
  }
  .tableTitle {
    color: #ffffff;
  }
}
::v-deep .el-dialog__wrapper {
  z-index: 9999 !important;
}
::v-deep .el-dialog {
  background-color: transparent !important;
}
// 表格
::v-deep .el-table__body-wrapper {
  height: calc(100% - 30px)!important;
  font-size: 12px!important;
}
::v-deep .el-table__body-wrapper table {
  height: 100%!important;
}
::v-deep .el-table__body-wrapper tbody {
  height: 100%!important;
}

::v-deep .el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}
::v-deep .el-table::before {
  height: 0px;
}
::v-deep .el-table th {
  background-color: #153864cc !important;
  border-bottom: none !important;
  color: #36f5f7;
}
::v-deep .el-table tr {
  background-color: transparent !important;
  color: #ffffff;
  height: 10%;
}
::v-deep .el-table td {
  padding: 5px 0 !important;
}
::v-deep .el-table--enable-row-transition .el-table__body td,
::v-deep .el-table .cell {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  line-height: normal;
}

// 分页
::v-deep .pagination-container {
  background: transparent;
}
::v-deep .el-pagination.is-background .btn-prev,
::v-deep .el-pagination.is-background .btn-next,
::v-deep .el-pagination.is-background .el-pager li {
  background-color: transparent;
  color: #0aa7ff;
  border: 1px solid #0aa7ff;
}
</style>
